<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select class="sel1"></select>
		
		<select class="sel2"></select>
		
		<script type="text/javascript">
			var sel1=document.getElementsByClassName("sel1")[0];
			var sel2=document.getElementsByClassName("sel2")[0];
			
			var arr1=["--请选择--","北京","上海","广州","深圳","四川","重庆"];	
			
			var arr2=[["--请选择--"],
					  ["北京1","北京2","北京3","北京4","北京5","北京6"],
					  ["上海1","上海2","上海3","上海4","上海5","上海6"],
					  ["广州1","广州2","广州3","广州4","广州5","广州6"],
					  ["深圳1","深圳2","深圳3","深圳4","深圳5","深圳6"],
					  ["四川1","四川2","四川3","四川4","四川5","四川6"],
					  ["重庆1","重庆2","重庆3","重庆4","重庆5","重庆6"],
					]
			var str="<option>"+arr1.join("</option><option>")+"</option>";
			sel1.innerHTML=str;
			
			sel1.onchange=function(){
				var x=sel1.selectedIndex;
				var str2="<option>"+arr2[x].join("</option><option>")+"</option>";
				sel2.innerHTML=str2;
			}
			
			sel1.onchange();
		</script>
	</body>
</html>
